<template>
  <div :class="styles.board">
    <div :class="styles.boardItem">
      <span :class="styles.boardItemT">{{ data.collect }}</span>
      <span :class="styles.boardItemB">我关注的</span>
    </div>
    <div :class="styles.boardItem">
      <span :class="styles.boardItemT">{{ data.fans }}</span>
      <span :class="styles.boardItemB">关注我的</span>
    </div>
    <div :class="styles.boardItem">
      <span :class="styles.boardItemT">{{ data.visitor }}</span>
      <span :class="styles.boardItemB">最近来访</span>
    </div>
  </div>
</template>

<script lang="ts">
import { onMounted, ref } from 'vue';
import styles from './index.module.less';

export default {
  setup() {
    const data = ref({});
    onMounted(() => {
      data.value = {
        collect: 11,
        fans: 21,
        visitor: 32,
      };
    });
    return {
      styles,
      data,
    };
  },
};
</script>
